<template>
  <div>
    <DetailBanners
    :BannerImg="BannerImg"
    :sightName="sightName"
    :gallaryImgs="gallaryImgs"
    ></DetailBanners>
    <DetailHeader></DetailHeader>
    <div class="content">
      <DetailList :list="list"></DetailList>
    </div>
  </div>
</template>

<script>
import DetailBanners from "./components/Banner";
import DetailHeader from "./components/Header";
import DetailList from "./components/List";
import axios from "axios";
export default {
  name: "Detail",
  components: {
    DetailBanners,
    DetailHeader,
    DetailList
  },
  data() {
    return {
      list: [],
      BannerImg: "",
      sightName: "",
      gallaryImgs: []
    };
  },
  methods: {
    getDetailInfo() {
      axios
        .get("http://localhost:8080/api/DetaleTitle")
        .then(res => {
          res = res.data;
          if (res.ret && res.datas) {
            this.list = res.datas.categoryList;
            this.BannerImg = res.datas.bannerImg;
            this.sightName = res.datas.sightName;
            this.gallaryImgs = res.datas.gallaryImgs;
          }
        })
        .catch(err => {
          console.log("请求失败");
        });

      axios
        .get("http://192.168.0.104:8080/api/DetaleTitle")
        .then(res => {
          res = res.data;
          if (res.ret && res.datas) {
            this.list = res.datas.categoryList;
            this.BannerImg = res.datas.bannerImg;
            this.sightName = res.datas.sightName;
            this.gallaryImgs = res.datas.gallaryImgs;
          }
        })
        .catch(err => {
          console.log("请求失败");
        });
    }
  },
  mounted() {
    this.getDetailInfo();
  }
};
</script>

<style lang='less' scoped>
.content {
  height: 50rem;
}
</style>
